---
id: 61b0a44a6b865738ba49b9fb
title: Schritt 86
challengeType: 0
dashedName: step-86
---

# --description--

Das Letzte, was du tun wirst, ist, jeder Markierung einen leichten Schatten hinzuzufügen, um sie noch realistischer erscheinen zu lassen.

Mit der Eigenschaft `box-shadow` kannst du einen oder mehrere Schatten um ein Element herum legen. Hier ist die grundlegende Syntax:

```css
box-shadow: offsetX offsetY color;
```

So funktionieren die `offsetX` und `offsetY`-Werte:

* sowohl `offsetX` als auch `offsetY` akzeptieren Zahlenwerte in `px` und anderen CSS-Einheiten
* ein positiver `offsetX`-Wert bewegt den Schatten nach rechts und ein negativer Wert bewegt ihn nach links
* ein positiver `offsetY`-Wert bewegt den Schatten nach unten und ein negativer Wert bewegt ihn nach oben
* wenn du einen Wert von Null (`0`) für irgendeinen oder beide `offsetX` und `offsetY` möchtest, musst du keine Einheit einfügen. Jeder Browser weiß, dass Null keine Änderungen bedeutet.

Die Höhe und Breite des Schattens wird durch die Höhe und Breite des Elements bestimmt, auf das er angewendet wird. Du kannst auch einen optionalen `spreadRadius`-Wert verwenden, um die Reichweite des Schattens erweitern. Mehr dazu später.

Beginne, indem du der roten Markierung einen leichten Schatten hinzufügst.

Füge in die `.red`-CSS-Regel die `box-shadow`-Eigenschaft mit den Werten `5px` für `offsetX`, `5px` für `offsetY` und `red` für `color` hinzu.

# --hints--

Deine `.red`-CSS-Regel sollte eine zusammenfassende `box-shadow`-Eigenschaft und den Wert `5px 5px red` haben.

```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
      <div class="marker green">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
      <div class="marker blue">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.cap {
  width: 60px;
  height: 25px;
}

.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
  border-left: 10px double rgba(0, 0, 0, 0.75);
}

.cap, .sleeve {
  display: inline-block;
}

--fcc-editable-region--
.red {
  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
}
--fcc-editable-region--

.green {
  background: linear-gradient(#55680D, #71F53E, #116C31);
}

.blue {
  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
}

```
